<template>
	<div id="login">
		<div class="box">
			<img src="@/assets/image/login/logo1.png" />
			<div class="haoma">一网通用户<span>188****5515</span></div>
			<img src="@/assets/image/login/logo2.png" class="zhiwen" />
			<div>点击进行指纹登录</div>
			<div class="gengduo" @click="showPopup">更多</div>
		</div>
		<van-action-sheet v-model="show" :actions="actions" cancel-text="取消" close-on-click-action @cancel="onCancel" @select="onSelect" />

      <main-tab-item></main-tab-item>
	</div>
</template>

<script>
	import {
		ActionSheet,
		Toast
	} from 'vant';
	import MainTabItem from '@/components/MainTabItem.vue'
	export default {
		data() {
			return {
				show: false,
				actions: [
				{  
					id:1,
					name: '手势登录'
				}, {
					id:2,
					name: '密码登录'
				},],
			};
		},
		methods: {
			  onSelect(item) {
			        if(item.id==1){
						this.$router.push('/loginshous')
					}else if(item.id==2){
						this.$router.push('/loginitem')
					}
					
			    },
			onCancel() {
				Toast('取消');
			},
			showPopup() {
				this.show = true
			}
		},
		components: {
			[ActionSheet.name]: ActionSheet,
			[Toast.name]: Toast,
			MainTabItem
		}
	}
</script>

<style lang="less" scoped>
	#login {
		width: 100vw;
		height: 100%;
		background-color: #E5E5E5;
		position: fixed;
		display: flex;
		justify-content: center;

	}

	.box {
		text-align: center;
		margin-top: 100px;

		img {
			width: 146px;
			height: 47px;
		}

		.haoma {
			font-size: 14px;
			color: #101010;
			margin-top: 15px;

			span {
				font-size: 18px;
				padding-left: 15px;
			}
		}

		.zhiwen {
			margin-top: 80px;
			font-size: 14px;
			width: 71px;
			height: 73px;
		}

		.gengduo {
			color: #0081D9;
			font-size: 14px;
			margin-top: 20px;
		}

	}

	.popup {
		width: 100vw;
		height: 500px;
		border: 1px solid red;

	}
</style>
